Layout Options
Description
The Grid layouts presented in the Component Type page include Tabular, Form(Columnar), and Stacked Columnar) grids. As each of these types creates different grids, selecting one or another will ultimately alter what you see in your Layout Options when you come to the properties page.
- Name
- Description
- Class map
Loads the Class Map Overrides Dialog. Allows you to override the way in which any of the Abstract CSS Class Names are mapped to Physical Class Names. When the Component is designed, all of the HTML controls in the component use Abstract CSS Class Names (e.g. [class.gridPartInput]). When the Component is run, the Absrtact CSS Class Names are converted to Physical CSS Class Names (e.g GlassBlueInput). The Class Map is used to convert Abstract CSS Class Names to Physical Class Names
- Resolve abstract CSS class names
Can view class names using the browser to see real physical class names.
- Style name
'Style name' lets you set the style of an individual component. To set a style first click the button next to the Style name property to open the Select Style dialog.
- Customize style colors and fonts
Customize the style colors and fonts. This provides a simpler way to customize colors than editing the style.
- Use compact theme
If supported by the theme, enables 'compact' view. The 'compact' view is often used in desktop browser applications.
- Edit style in Style Builder
Edit style in Style Builder property
- Simple style
Check this box to use a simpler version of the stylesheet which is more appropriate for a form (i.e. 'columnar') layout.
- Style overrides for Javascript elements
By default, the Tabs, Accordions, pop-up Windows, Lists (edit-combo, auto-suggest, etc.) are styled using the selected Grid style. You can override the style for these elements. This might be necessary for certain styles where the default appearance for these elements do not work well.
- Repeating columns
By default, the Tabs, Accordions, pop-up Windows, Lists (edit-combo, auto-suggest, etc.) are styled using the selected Grid style. You can override the style for these elements. This might be necessary for certain styles where the default appearance for these elements do not work well.
- Snaking style
You are probably familiar with this display from sites like Netflix or Amazon, even if you have never seen the term 'Snaking style'. This style is used particularly with image links displayed in a row across a screen, think movie genre displays or a list of recently viewed items on a shopping site.
- Add records only
The ' Add records only ' property allows users to add new records but not see existing records.
- Show Confirmation Message
This property specifies if a conformation message should be shown after the Submit button is pressed when a user enters information. Because this feature is only utilized for grids that can be altered, you will need to select Grid is Updatable in the Component Type page.
- Confirmation Message Template
This property creates a conformation message that appears just above your grid. By default on the right side of the screen. If you leave this property blank, a default template will be used. Use the {RecordCount} placeholder in the template to show the number of records added at any one time.
- Rows of data
You can use this property to specify the number of rows data to show on each page.
- Rows of data when search active
Use this property to specify the number of rows to show in the Grid when a search (done in the Search Part) is active. Set to -1 to show the same number of rows as specified in the 'Rows of the data' property. Set to 0 to show all the records in the current query. The 'Maximum number of records per page' property will still apply.
- Maximum number of rows per page
Maximum number of rows to display. Only applies if 'Rows of data' is set to 0, which causes the Grid to show all records in the query at once on a single page. Set to 0 if you do not want to specify a maximum value.
- Number of 'Layout' Columns
The Number of 'Layout' Columns property takes all the information contained in a single record and displays it across a specified number of columns.
- Suppress empty rows
The Suppress empty rows property indicates whether or not to hide empty rows. Rows are hidden if a query returns fewer records than the number of rows in the grid. By default this property is set to true.
- Show title
Indicates whether or not to display the component title. If you click on the checkbox next to this property the Title property will open and allow you to set the title for your grid. By default this property is not checked.
- Title
The Title property allows you to set the HTML properties for the Title of a particular grid. Clicking the button next to Title opens the HTML editor. This lets you adjust the type of font used for the title, its color, size, its alignment, add images, and so forth.
- Font size
You can scale the fonts in your grid component using this property. There are five choices to select from, 'Smallest', 'Smaller', 'Medium', 'Larger', and 'Largest'. 'Medium' is the default setting and is also not scaled; such that the fonts shown under the Medium setting will correspond to those defined in the style sheet.
- Has 'Records Per Page' selector
Adding the ' Records Per Page ' selector allows the user to change the number of rows displayed after the grid opens on a page.
- 'Records Per Page' selector choices
The 'Records Per Page' selector choices property lets you specify the number of pages a user can view in the 'Records per page' drop down.
- 'Records Per Page' template
This property helps you specify the template for the ' Records per page ' selector . The default setting for this template is the following....
- Highlight row on hover
Highlight row on hover helps identify the currently selected row so that it is easier to click on with the mouse. It is sometimes difficult to immediately find the position of the cursor on a grid. Selecting this property will cause the style of a row to change when the mouse hovers over the row.
- Highlight row on select
Highlight row on select property highlights a row in the Grid part when the user clicks on that row.
- Has checkbox select column
The ' Has checkbox select column ' property adds a column with a checkbox for each row in a grid component. This makes it possible for users to easily select one or more records. This property also adds a checkbox in the grid's title bar that will select/deselect all of the checkboxes.
- Has row selector column
This property specifies if the grid has a single column containing a row selector. The row selector indicates which row in the grid is currently selected. The row selector normally appears as a small triangle on the left side of the grid. If your grid is updateable and only allows users to input data, not read existing data, then the row selector will appear as a small asterisk.
- Vertical alignment of controls in columns
Specify the vertical alignment of controls in each column. Default is "Middle".
- Can collapse grid?
The Can collapse grid? property allows a user to click an icon to hide the grid and just show a simple title bar.